<!--
 * @Author: 噜噜雯雯 2199987619@qq.com
 * @Date: 2025-06-21 16:36:53
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-09-17 14:55:54
 * @FilePath: \linePatrol\vue-element-plus-admin\src\views\EquipManage\EquipType\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="tsx">
import { useI18n } from '@/hooks/web/useI18n'
import { Table } from '@/components/Table'
import { ref, unref, reactive, h } from 'vue'
import { ElMessage, ElTag } from 'element-plus'
import { useTable } from '@/hooks/web/useTable'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useDictStore } from '@/store/modules/dictData'
import { useDeptStore } from '@/store/modules/dept'
import SecurCheckLedgerApi from '@/api/securcheck/LedgerMessage'
import DeptApi from '@/api/dept'
const { t } = useI18n()
const DeptStore = useDeptStore()
const departmentList = ref<any>([]) //树结构数据
const DictStore = useDictStore()
//获取字典
DictStore.setDict('secur_user_state') //用户状态
DictStore.setDict('secur_user_type') //用户类型
DictStore.setDict('secur_y_n') //气代煤用户
DictStore.setDict('secur_gas_type') //气源类型
DictStore.setDict('secur_user_refer') //用户描述
DictStore.setDict('secur_is_oov') //是否开启开关阀
DictStore.setDict('secur_inst_state') //安装状态
DictStore.setDict('secur_activate_state') //开通状态
DictStore.setDict('secur_user_refer') //安装状态
if (DeptStore.DeptListTypeDetail.length == 0) {
  DeptStore.setFacilityTypeDetail()
}
//表格内容接口
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    const i = await SecurCheckLedgerApi.GetUserLedgerList({
      pageIndex: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: i.rows,
      total: i.total
    }
  }
})
const { total, loading, dataList, pageSize, currentPage } = tableState
const { getList } = tableMethods
//表格结构
const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'selection',
    type: 'selection',
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    search: {
      hidden: true
    },
    fixed: 'left'
  },
  {
    field: 'index',
    label: t('tableDemo.index'),
    fixed: 'left',
    type: 'index',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    }
  },
  {
    field: 'userNumebr',
    label: t('用户编号'),
    width: 150,
    form: {
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'userName',
    label: t('用户名称'),
    form: {
      hidden: true
    },
    search: {
      component: 'Input',
      componentProps: {
        placeholder: '用户名称'
      }
    }
  },
  {
    field: 'userType',
    label: t('用户类型'),
    width: 200,
    formatter: (_: Recordable, __: any, cellValue: string) => {
      return DictStore.$state.secur_user_type?.map((item) => {
        if (item.dictValue == cellValue) {
          return t(item.dictLabel)
        }
      })
    },
    form: {
      component: 'Select',
      colProps: {
        span: 8
      },
      componentProps: {
        options: DictStore.$state.secur_user_type?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    search: {
      hidden: true
    }
  },

  {
    field: 'userState',
    label: t('用户状态'),
    formatter: (_: Recordable, __: any, cellValue: string) => {
      return DictStore.$state.secur_user_state?.map((item) => {
        if (item.dictValue == cellValue) {
          return h(ElTag, { type: item.listClass }, () => t(item.dictLabel))
        }
      })
    },
    search: {
      component: 'Select',
      colProps: {
        span: 8
      },
      componentProps: {
        placeholder: '用户状态',
        options: DictStore.$state.secur_user_state?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    form: {
      component: 'Select',
      colProps: {
        span: 8
      },
      componentProps: {
        options: DictStore.$state.secur_user_state?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    }
  },

  {
    field: 'areaId',
    label: t('用户片区'),
    table: {
      hidden: true
    },
    form: {
      colProps: {
        span: 8
      },
      component: 'TreeSelect',
      componentProps: {
        renderAfterExpand: false,
        checkOnClickNode: true,
        nodeKey: 'id',
        props: {
          label: 'label'
        }
      },
      optionApi: () => {
        const res = departmentList.value
        return res
      }
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'userPhone',
    label: t('用户电话'),
    width: 200,
    form: {
      hidden: true
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'contacts',
    label: t('联系人'),
    width: 200,
    form: {
      hidden: true
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'contPhone',
    label: t('联系方式'),
    width: 200,
    form: {
      hidden: true
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'deptId',
    label: t('所属公司'),
    width: 200,
    table: {
      hidden: true
    },
    form: {
      colProps: {
        span: 8
      },
      component: 'TreeSelect',
      componentProps: {
        renderAfterExpand: false,
        showCheckbox: true,
        checkStrictly: true,
        checkOnClickNode: true,
        nodeKey: 'id',
        props: {
          label: 'label'
        }
      },
      optionApi: async () => {
        const res = await DeptApi.GetDeptListTree()
        return res.data
      }
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'userQrcode',
    label: t('二维码'),
    width: 200,
    search: {
      hidden: true
    },
    table: {
      hidden: true
    },
    form: {
      colProps: {
        span: 8
      }
    }
  },
  {
    field: 'gasOrCoal',
    label: t('汽代煤用户'),
    width: 200,
    formatter: (_: Recordable, __: any, cellValue: string) => {
      return DictStore.$state.secur_y_n?.map((item) => {
        if (item.dictValue == cellValue) {
          return t(item.dictLabel)
        }
      })
    },
    form: {
      hidden: true
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'oaDate',
    label: t('开户日期'),
    width: 200,
    form: {
      hidden: true
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'community',
    label: t('小区名称'),
    width: 200,
    form: {
      hidden: true
    },
    search: {
      hidden: false,
      component: 'Input',
      componentProps: {
        placeholder: '小区名称'
      }
    }
  },
  {
    field: 'floorNo',
    label: t('楼栋'),
    width: 200,
    form: {
      hidden: true
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'unitNo',
    label: t('单元'),
    width: 200,
    form: {
      hidden: true
    },
    search: {
      hidden: true
    }
  },

  {
    field: 'roomNo',
    label: t('房间号'),
    width: 200,
    form: {
      hidden: true
    },
    search: {
      hidden: true
    }
  },

  {
    field: 'companyNo',
    label: t('单位编号'),
    width: 200,
    form: {
      hidden: true
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'gasType',
    label: t('气源类型'),
    width: 200,
    formatter: (_: Recordable, __: any, cellValue: string) => {
      return DictStore.$state.secur_gas_type?.map((item) => {
        if (item.dictValue == cellValue) {
          return t(item.dictLabel)
        }
      })
    },
    form: {
      hidden: true
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'meterCount',
    label: t('表具数量'),
    width: 200,
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)
const searchParams = ref({})
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}
const selectedRows: any = ref([])
// 处理选择变化事件
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
  console.log('选中行数据:', selectedRows.value)
}
const tableRef = ref()
const submit = async () => {
  if (selectedRows.value) {
    if (selectedRows.value.length !== 1) {
      ElMessage.warning('只能选择一条数据')
    } else {
      return selectedRows.value[0]
    }
  }
}
defineExpose({
  submit
})
</script>
<template>
  <div class="w-100% h-100%">
    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      ref="tableRef"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      row-key="uuid"
      :loading="loading"
      @register="tableRegister"
      @selection-change="handleSelectionChange"
      :pagination="{
        total
      }"
    />
  </div>
</template>
<style scoped>
/* .el-tree {
  height: 410px;
  overflow: hidden;
  overflow-y: scroll;
} */
.el-tree-node:focus > .el-tree-node__content {
  color: #409eff;
}
.el-card__body {
  padding: 10px;
  /* height: 90%; */
}
.CloseBtn {
  font-weight: 600;
  margin: 0 3px;
  color: darkgrey;
}
.AddbtnStyle {
  margin-bottom: 18px;
  margin-right: 10px;
}
.el-collapse-item {
  padding: 15px 0;
}
.el-collapse-item__content {
  padding-bottom: 0;
}
.el-collapse-item__header {
  width: 62px;
  height: 24px;
  border-radius: 2px;
  color: white;
  background: #409eff;
  justify-content: center;
  font-size: 12px;
}
.el-collapse-item__arrow {
  margin: 0 2px;
}

:deep(.TableBtn) {
  margin: 0 5px;
  cursor: pointer;
  color: #409eff;
  font-weight: 600;
}
</style>
